<!DOCTYPE html>
<html>
  <head>
    <title>Integration Substitution Extension Options</title>
    <style>
        body{background-color:#eef;color:#000;font-family:arial,sans-serif;font-size:12px}
        a{color:#11c;text-decoration:none}
        a:hover{text-decoration:underline}
        #content{
            background-color:#fff;border-color:#abd;border-style:solid;border-width:4px;
            margin:10px auto 0;padding:12px;width:600px;-webkit-border-radius:12px;
        }
        #fresh_man_tip { display:none; text-align:center; font-size:14px; color:red; padding-top:15px; }
        #title{color:#333;font-size:20px;margin:10px 0 0;text-align:center}
        .option_row{clear:left;padding:30px 10px 0}
        .option_name{float:left;font-weight:bold;margin-top:2px;width:140px;padding-right:20px;text-align:right;}
        .option_value{float:left}
        .option_value_secondary{margin:5px 0 20px 35px}
        .text_disabled{color:#999}
        .buttons{clear:left;padding:20px 10px 10px}
        #save_status{font-weight:bold;margin-left:10px; height:20px; overflow:hidden;text-align:center; padding-top:10px; }
        #save_status span {background-color:#fea;}
        .footer{margin-top:10px;text-align:center}
        .buttons { text-align:right; }
        #my_history { width:120px; }
        .delete_history { margin-left:10px; }
        .delete_history u { color:#36C; margin-left:10px; cursor:pointer; }
        .swap_type_wrapper { display:none; }
        .input_tip { margin-left:5px; font-size:12px; color:#ccc; }
    </style>
    <script src="beautify.js"></script>
    <script type="text/javascript" src="lib/jquery-1.7.1.min.js"></script>
  </head>
  <body>
    <div id="content">
      <div id="title">
        <img src="images/48.png" />
        <div>SNS App Swap Extension Options</div>
      </div>
      <div id="save_status"></div>
      <div id="fresh_man_tip">
          It seems that you are the first time to use this extension. <br />
          Please validate following app setting and click "Save" button to save it.
      </div>
        <div class="option_row">
          <div class="option_name">My History:</div>
          <div class="option_value">
            <div class="option_value_primary">
                <select id="my_history">
                    <option value="default">Default</option>
                </select>
                <span class="delete_history"><u id="delete_history_trigger">Delete</u></span>
            </div>
          </div>
        </div>
        <div class="option_row">
          <div class="option_name">Swap Type:</div>
          <div class="option_value">
            <div class="option_value_primary">
                <label><input name="swap_type" type="radio" value="1" />Custom Config</label>
                <label><input name="swap_type" type="radio" value="2" />GIP App ID</label>
            </div>
          </div>
        </div>
        <div id="swap_type_wrapper_2" class="swap_type_wrapper">
            <div class="option_row">
              <div class="option_name">GIP App ID:</div>
              <div class="option_value">
                <div class="option_value_primary">
                    <input id="gip_app_id" type="text" value="" />
                    <span class="input_tip">ex. 8000100901</span>
                </div>
              </div>
            </div>
            <div class="option_row">
              <div class="option_name">URL Prefix:</div>
              <div class="option_value">
                <div class="option_value_primary">
					<input id="frame_url" type="text" value="" />
                    <span class="input_tip">%s is the placeholder of App ID</span>
                </div>
              </div>
            </div>
        </div>
        <div id="swap_type_wrapper_1" class="swap_type_wrapper">
            <div class="option_row">
              <div class="option_name">App Height:</div>
              <div class="option_value">
                <div class="option_value_primary">
                    <input id="app_height" type="text" value="" />px
                </div>
              </div>
            </div>
            <div class="option_row">
              <div class="option_name">App URL:</div>
              <div class="option_value">
                <div class="option_value_primary">
                    <input id="app_url" type="text" value="" style="width:400px;" />
                </div>
                <div id="option_get_latest"></div>
              </div>
            </div>
            <div class="option_row">
              <div class="option_name">App Config:</div>
              <div class="option_value">
                <div class="option_value_primary">
                    <textarea id="app_config" style="width:300px;height:200px;"></textarea>
                </div>
              </div>
            </div>
        </div>
        <div class="buttons">
          <button id="save_button">Save</button>
          <button id="save_as_button">Save As</button>
          <button id="reset_button">Reset</button>
        </div>
    </div>
    <script src="options.js"></script>
  </body>
</html>
